<template>
	<div>
		<!-- 搜索条件 -->
        <el-card class="mgb20" shadow="hover">
            <div slot="header" class="clearfix">
                <span>筛选查询</span>
            </div>
            <el-form :inline="true" :model="searchData" ref="ruleForm" label-width="90px" :rules="rules">
                <el-form-item label="订单编号：" prop="orderNo">
                    <el-input 
                        v-model="searchData.orderNo"
                        placeholder="请输入订单编号"
                        style="width: 150px;margin-right: 20px;">
                    </el-input>
                </el-form-item>
                <el-form-item label="下单时间：" prop="submitTime">
                    <el-date-picker
                        v-model="searchData.submitTime"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :picker-options="searchData.pickerOptions"
                        class="daterange">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="支付时间：" prop="payTime">
                    <el-date-picker
                        v-model="searchData.payTime"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        :picker-options="searchData.pickerOptions"
                        class="daterange">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="订单状态：" prop="orderStatus" v-if="orderStatus == 0">
                    <el-select v-model="searchData.orderStatus" style="width: 130px;margin-right: 15px;">
                        <el-option label="全部" value=""></el-option>
                        <el-option
                            v-for="(key, value) in searchData.orderStatusList"
                            :key="value"
                            :label="key"
                            :value="value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="包裹号：" prop="packageCode" v-if="orderStatus == 0">
                    <el-input 
                        v-model="searchData.packageCode"
                        placeholder="请输入包裹号"
                        style="width: 150px;margin-right: 20px;">
                    </el-input>
                </el-form-item>
                <el-form-item label="包裹状态：" prop="packageStatus">
                    <el-select v-model="searchData.packageStatus" style="width: 130px;margin-right: 15px;">
                        <el-option label="全部" value=""></el-option>
                        <el-option
                            v-for="(key, value) in searchData.packageStatusList"
                            :key="value"
                            :label="key"
                            :value="value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="submitForm('ruleForm')">查询</el-button>
                    <el-button icon="el-icon-refresh" @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        
		<!-- 数据列表 -->
        <el-card class="mgb20" shadow="hover">
            <div slot="header" class="clearfix">
                <span>数据列表</span>
                <div class="contWrap">
                    排序方式：
                    <el-select v-model="orderBy" @change="getData">
                        <el-option label="添加时间倒序" :value="1"></el-option>
                        <el-option label="添加时间正序" :value="0"></el-option>
                    </el-select>
                </div>
            </div>
            <el-row>
                <merge-table ref="table" :dataList="dataList" :rowSet="rowSet" :sameAttr="sameAttr">
                    <el-table-column
                        prop="orderNo"
                        label="订单编号"
                        min-width="150">
                    </el-table-column>
                    <el-table-column
                        label="用户下单时间"
                        min-width="150">
                        <template slot-scope="scope">
                            {{scope.row.createTime | formatDate}}
                        </template>
                    </el-table-column>
                    <el-table-column                        
                        label="用户支付时间"
                        min-width="150">
                        <template slot-scope="scope">
                            {{scope.row.payTime | formatDate}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="订单状态"
                        width="100">
                        <template slot-scope="scope">
                            {{searchData.orderStatusList[scope.row.orderStatus] || '未知'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="packageCode"
                        min-width="140"
                        label="包裹号">
                    </el-table-column>
                    <el-table-column 
                        label="包裹状态"
                        width="100">
                        <template slot-scope="scope">
                            {{searchData.packageStatusList[scope.row.packageStatus] || '未知'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="包裹物流信息"
                        width="150">
                        <template slot-scope="scope">
                            <package-alert
                                v-for="data in scope.row.expressList"
                                :express="data" 
                                :key="data"
                                :packageCode="scope.row.packageCode">
                                {{data}}
                            </package-alert>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        width="120"
                        label="操作">
                        <template slot-scope="scope">
                            <el-button 
                                type="text" 
                                icon="el-icon-reading" 
                                @click="jumpPage(scope.row.orderNo,0)">订单详情
                            </el-button>
                            <el-button
                                v-if="scope.row.orderStatus == 'PAYED' && mergePackageStatus(scope.$index, 'WAITING_DELIVERY') && scope.row.rejectStatus != 1"
                                type="text" 
                                icon="el-icon-delete" 
                                class="red" 
                                @click="deleteData(scope.row.orderNo)">取消订单
                            </el-button>
                            <el-button 
                                v-if="mergePackageStatus(scope.$index, 'WAITING_COMMENT')"
                                type="text"
                                icon="el-icon-question" 
                                @click="jumpPage(scope.row.orderNo,1)">申请售后
                            </el-button>
                            <el-button 
                                v-if="scope.row.rejectStatus == 1"
                                type="text"
                                icon="el-icon-lx-roundclose"
                                disabled>已拒绝取消
                            </el-button>
                        </template>
                    </el-table-column>
                </merge-table>
            </el-row> 
        </el-card>

        <el-card class="mgb20" shadow="hover" v-if="total > 0">
            <el-row>
                <el-pagination
                    @current-change="getData"
                    :current-page.sync="current"
                    :page-size="pageSize"
                    layout="total, prev, pager, next, jumper"
                    style="float:right"
                    :total="total">
                </el-pagination>
            </el-row>
        </el-card>
	</div>
</template>

<script>
    import mergeTable from '../../common/spanMergeTable.vue';
	export default {
		props:['orderStatus'],
        components: {
            mergeTable
        },
		data() {
			let checkNum = (rule, value, callback)=>{
				if(value ==''){
					callback();
				}
				if(!this.util.RegExpr.checkNum(value)){
					callback(new Error('订单编号只支持数字'));
				}else{
					callback();
				}
			};
			return{
				rules:{
					orderNo: [
						{ validator: checkNum, trigger: 'blur', require : false}
					]
				},
				searchData : {
					orderNo: '',
                    submitTime: '',
                    payTime: '',
                    orderStatus: this.orderStatus,
                    orderStatusList: {
                        'PAYED' : '已支付',
                        'KF_CANCEL' : '已取消',
                        'CANCELLING' : '取消中'
                    },
                    packageCode: '',
                    packageStatus: '',
                    packageStatusList: {
                        'START_DELIVERY' : '已发货',
                        'WAITING_DELIVERY' : '待发货',
                        'WAITING_COMMENT' : '已收货',
                        'KF_CANCEL' : '已取消',
                    },
                    pickerOptions: {
                        disabledDate: (time)=>{
                            return time.getTime() > Date.now();
                        }
                    },
                },
                orderBy : 1,   //排序方式，默认倒序
                dataList : [],  //请求到的数据集合
                sameAttr: 'orderNo',
                rowSet:[0,1,2,3,7],  //需要合并行的表头
                current : 1,  //当前页码
                pageSize : Number(localStorage.getItem('pageSize')),
                total : 0
			}
		},
        computed: {
            createStartTime(){
                if(this.searchData.submitTime instanceof Array){
                    return this.searchData.submitTime[0];
                }else{
                    return "";
                }
                    
            },
            CreateEndTime(){
                if(this.searchData.submitTime instanceof Array){
                    return this.searchData.submitTime[1];
                }else{
                    return "";
                }
            },
            payStartTime(){
                if(this.searchData.payTime instanceof Array){
                    return this.searchData.payTime[0];
                }else{
                    return "";
                }
            },
            payEndTime(){
                if(this.searchData.payTime instanceof Array){
                    return this.searchData.payTime[1];
                }else{
                    return "";
                }
            },
            mergePackageStatus(){
                //判断此订单是否所有包裹状态都为待发货或已收货
                return (index,type)=>{
                    const spanArr = this.$refs['table'].spanArr;
                    let mergeLength = spanArr[index];  //合并条数
                    let flag = true;  //默认为true
                    for(let i = 0;i < mergeLength; i++){
                        if(this.dataList[index + i].packageStatus != type){
                            flag = false;
                        }
                    }
                    return flag;
                }
                
            }
        },
		methods:{
			resetForm(formName){
                this.$refs[formName].resetFields();
            },
            submitForm(formName){
            	this.$refs[formName].validate((valid) => {
					if (valid) {
						this.getData();
					} else {
						return false;
					}
		        });
            },
            getData(){
                this.$axios
                    .post("/admin/order/getOrderList.json",{
                        orderNo: this.searchData.orderNo,
                        packageCode: this.searchData.packageCode,
                        orderStatus: this.searchData.orderStatus,
                        packageStatus: this.searchData.packageStatus,
                        createStartTime: this.createStartTime,
                        CreateEndTime: this.CreateEndTime,
                        payStartTime: this.payStartTime,
                        payEndTime: this.payEndTime,
                        orderBy: this.orderBy,
                        pageNo: this.current,
                        pageSize: this.pageSize

                    })
                    .then(res => {
                        const data = res.data;
                        if(data.success){
                            this.dataList = data.list;
                            
                            if(data.pageInfo){
                                //获取分页信息
                                this.current = data.pageInfo.pageIndex;
                                this.total = data.pageInfo.recordCount;
                            }

                            //获取数据合并后的id集合
                            this.checkedGameId = this.util.fnNumber.mergeData(this.dataList,this.sameAttr);
                        }else{
                            this.$message.error(data.message);
                        } 
                    })
            },
            jumpPage(orderNo,type){
                let jumpRouter = '';
                switch (type) {
                    case 0:   //查看详情
                        jumpRouter = '/orderDetail';
                        break;
                    case 1:   //申请售后
                        jumpRouter = '/applyAfterSale';
                        break;
                    default:
                        // statements_def
                        break;
                }
                this.$router.push({'path': jumpRouter,query:{orderNo:orderNo}});
            },
            deleteData(orderNo){
                this.$confirm('是否取消该订单？', '提示', {
                    type: 'info'
                }).then(()=>{
                    this.$axios
                        .post("/admin/order/cancelOrder.json",{
                            orderNo: orderNo
                        })
                        .then(res => {
                            const data = res.data;
                            if(data.success){
                                this.$message.success('操作成功！');
                                this.getData();
                            }else{
                                this.$message.error(data.message);
                            } 
                        })
                }).catch(()=>{
                    
                })

                    
            }
        },
        mounted(){
            this.getData();
        }
	}
</script>

<style scoped>
	.daterange{
		width: 320px;
	}
	.contWrap{
        float: right;
        margin-top: -6.5px;
    }
    .contWrap .el-select{
        width: 150px;
    }
    .red{
    	color: red;
    }
</style>
